<template>
  <div class="mean-block">
    <el-menu default-active="1" text-color="#fff" @select="selectEvent" active-text-color="#ffd04b"
             background-color="#0f151b" class="el-menu-vertical-demo">
      <el-menu-item :index="item.action" v-for="(item, index) in meanData" :key="index">
        <span>{{ item.label }}</span>
      </el-menu-item>
    </el-menu>
    <div class="content">
      <component :is="compontentAction"></component>
    </div>
  </div>
</template>

<script lang="js" setup>
import {ref} from 'vue';
import StoreManage from './storeManage.vue'
import UseManage from './useManage.vue'
import ReturnManage from './returnManage.vue'

let compontentAction = ref(StoreManage)

let meanData = ref([{label: "库存管理", action: '1'}, {label: "领用管理", action: '2'}, {
  label: "归还管理",
  action: '3'
}])
const selectEvent = (data) => {
  if (data === '1') {
    compontentAction.value = StoreManage
  } else if (data === '2') {
    compontentAction.value = UseManage
  } else {
    compontentAction.value = ReturnManage
  }
  console.log(compontentAction.value)
}

</script>

<style scoped>
.el-menu-vertical-demo {
  min-width: 200px;
  height: 100%;
  /* background: #333; */
}

.mean-block {
  display: flex;
  height: 100%;
}

.content {
  flex: 1;
  /* margin-left: 10px; */
  /* width: 90%; */
  padding: 20px;
  background: #fff;
}
</style>